<template>
  <view class="content">
    <view class="header">
      <view class="bg-img">
        <u-image
          width="100%"
          height="300rpx"
          :src="require('@/static/images/movie/' + movie.imgSrc)"
          mode="widthFix"
        ></u-image>
      </view>
      <view class="movie-info">
        <u-image
          :src="require('@/static/images/movie/' + movie.imgSrc)"
          width="210rpx"
          height="310rpx"
          border-radius="10rpx"
          class="img"
        ></u-image>
        <view class="detail">
          <view class="title">{{ movie.title }}</view>
          <view class="desc"><text>类型</text>{{ types.join(' ') }}</view>
          <view class="desc"
            ><text>地区/片长</text>{{ movie.region }}/{{ movie.duration }}</view
          >
          <view class="desc"><text>评分</text> {{ movie.score }}</view>
        </view>
      </view>
    </view>
    <view class="divider"></view>
    <view class="detail">
      <view class="tab-list">
        <view
          class="tab-item"
          :class="current === 0 ? 'active-item' : ''"
          @click="change(0)"
          >排片</view
        >
        <view
          class="tab-item"
          :class="current === 1 ? 'active-item' : ''"
          @click="change(1)"
        >
          简介</view
        >
      </view>

      <!-- 排片 -->
      <view class="screen-share" v-show="current === 0">
        <!-- 选择购票日期 -->
        <scroll-view class="data-box" :scroll-x="true">
          <view
            v-for="(item, index) in dateList"
            :key="index"
            class="date-item"
            :class="selectedDate.date === item.date ? 'active-date' : ''"
            @click="chooseDate(item)"
          >
            <view>{{ item.date.substring(5) }}</view>
            <view>{{ item.day }}</view>
          </view>
        </scroll-view>
        <!-- 各影院排片 -->
        <scroll-view class="screen-share" :scroll-y="true">
          <view v-if="buildList.length > 0">
            <view v-for="item in buildList" :key="item.id">
              <view class="name">{{ item.name }}</view>
              <view class="address">
                <u-image
                  src="@/static/images/position-blue.png"
                  width="22rpx"
                  height="30rpx"
                ></u-image>
                <text>54km · {{ item.address }}</text>
              </view>
              <view class="movie-info"
                >{{ movie.language }} · ￥{{ movie.price }}</view
              >
              <view class="time-list">
                <view
                  v-for="(time, index) in item.screen_share"
                  :key="index"
                  class="time-item"
                  @click="chooseTime(time, item)"
                  :class="
                    selectedTime.time === time &&
                    selectedTime.build.id === item.id
                      ? 'active-time'
                      : ''
                  "
                  >{{ time }}</view
                >
              </view>
            </view>
          </view>
          <view v-else>暂无影院售票</view>
        </scroll-view>
      </view>
      <view class="btn" v-show="current === 0" @click="chooseSet"
        >立即选座</view
      >
      <view class="introduction" v-show="current === 1">
        <u-image
          width="100%"
          :src="require('@/static/images/movie/' + movie.posterSrc)"
          mode="widthFix"
        ></u-image>
        <text style="display: block; margin-top: 20rpx">{{ movie.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const data = require('@/mock/movie/index.json');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const movieType = require('@/mock/movie-type/index.json');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const buildings = require('@/mock/building/index.json');
import { IBuild, IMovie, ITime } from '@/@types/common';
import dayjs from 'dayjs';
import PAGE from '@/const/page';
import { getDayByDate } from '@/utils/getDay';

export default defineComponent({
  onLoad(options) {
    this.movieId = options?.id || '';
    //获取该电影详情
    data.movies.forEach((item: IMovie) => {
      if (item.id === this.movieId) {
        this.movie = item;
        movieType.types.forEach((type: any) => {
          if (this.movie?.movieType?.includes(type.id)) {
            this.types.push(type.name);
          }
        });
      }
    });
    //获取最近日期
    this.getDate();
    //获取各影院排班
    this.getBuildList();
  },
  setup() {
    const movieId = ref();
    const movie = ref<IMovie>();
    const types = ref<string[]>([]);
    const list = [
      {
        name: '排片',
      },
      {
        name: '简介',
      },
    ];
    const current = ref(0);
    const dateList = ref<ITime[]>([]);
    const selectedDate = ref<ITime>();
    const buildList = ref<IBuild[]>([]);
    const selectedTime = ref<{ time: string; build: IBuild }>({
      time: '',
      build: {},
    });
    return {
      movieId,
      movie,
      types,
      list,
      current,
      dateList,
      selectedDate,
      buildList,
      selectedTime,
    };
  },
  methods: {
    change(index: number) {
      this.current = index;
    },
    getDate() {
      for (let i = 0; i < 7; i++) {
        let time: ITime = {};
        time.date = dayjs()
          .add(24 * i, 'hour')
          .format('YYYY-MM-DD');
        time.day = getDayByDate(time.date);
        if (i === 0) {
          this.selectedDate = time;
        }
        this.dateList.push(time);
      }
    },
    getBuildList() {
      buildings.operas.forEach((item: any) => {
        if (item.movies.includes(this.movieId)) {
          const build: IBuild = {};
          build.id = item.id;
          build.name = item.name;
          build.address = item.address;
          build.screen_share = item.screen_share;
          this.buildList.push(build);
        }
      });
    },
    chooseDate(time: ITime) {
      this.selectedDate = time;
    },
    chooseTime(time: string, item: IBuild) {
      this.selectedTime.time = time;
      this.selectedTime.build = item;
    },
    chooseSet() {
      if (this.selectedTime.time) {
        uni.navigateTo({
          url:
            PAGE.CHOOSE_SET.PATH +
            '?movieName=' +
            this.movie?.title +
            '&operaName=' +
            this.selectedTime.build.name +
            '&date=' +
            this.selectedDate?.date +
            '&time=' +
            this.selectedTime.time +
            '&price=' +
            this.movie?.price +
            '&movieId=' +
            this.movieId,
        });
      } else {
        uni.showToast({
          title: '请选择影院及观影时间',
          icon: 'none',
          duration: 1500,
        });
      }
    },
  },
});
</script>

<style lang="scss" scoped>
.header {
  .bg-img {
    width: 100%;
    height: 300rpx;
    overflow: hidden;
  }

  .movie-info {
    width: 100%;
    height: 280rpx;
    position: relative;

    .img {
      position: absolute;
      top: -60rpx;
      left: 40rpx;
    }

    .detail {
      margin-left: 270rpx;
      width: calc(100% - 290rpx);
      height: 100%;

      .title {
        width: 100%;
        font-size: 36rpx;
        font-weight: 700;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 16rpx;
      }

      .desc {
        width: 100%;
        font-size: 24rpx;
        color: #666;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 10rpx 16rpx;
      }

      text {
        display: inline-block;
        width: 120rpx;
      }
    }
  }
}
.divider {
  width: 100%;
  height: 10rpx;
  background-color: #ccc;
}
.detail {
  .tab-list {
    padding: 0rpx 20rpx;
    border-bottom: 1px solid #ccc;
    display: flex;
    font-size: 32rpx;
    font-weight: 700;

    .tab-item {
      flex-grow: 1;
      text-align: center;
      padding: 20rpx 0rpx;
    }

    .active-item {
      border-bottom: 4rpx solid $u-type-primary;
    }
  }
}

.screen-share {
  .data-box {
    width: 100%;
    white-space: nowrap;
    border-bottom: 1px solid #ccc;

    .date-item {
      width: 110rpx;
      height: 120rpx;
      box-shadow: 0px 0px 2px #666;
      margin: 32rpx 0rpx;
      margin-left: 32rpx;
      border-radius: 10rpx;
      text-align: center;
      display: inline-flex;
      flex-direction: column;
      justify-content: space-evenly;
      font-weight: 700;
    }

    .active-date {
      background-color: $u-type-primary;
      color: white;
    }
  }

  .screen-share {
    width: calc(100% - 80rpx);
    margin: 20rpx 40rpx;
    margin-bottom: 120rpx;
    .name {
      font-size: 32rpx;
      font-weight: 700;
    }

    .address {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 30rpx;
      margin: 10rpx 0rpx;

      ::v-deep .u-image {
        display: inline-block;
        margin-right: 10rpx;
      }
    }

    .movie-info {
      padding: 34rpx 0rpx;
    }

    .time-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20rpx;
      .time-item {
        width: 124rpx;
        height: 52rpx;
        border: 1px solid rgba(0, 0, 255, 0.3);
        text-align: center;
        line-height: 52rpx;
        border-radius: 10rpx;
        margin-right: 22rpx;
        margin-bottom: 24rpx;
      }

      .active-time {
        background-color: $u-type-primary;
        color: white;
      }
    }
  }
}

.btn {
  width: calc(100% - 80rpx);
  height: 100rpx;
  margin: 20rpx 40rpx;
  background-color: $u-type-primary;
  border-radius: 14rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 700;
  text-align: center;
  line-height: 100rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.introduction {
  width: calc(100% - 80rpx);
  margin: 40rpx;
}
</style>
